

<HTML>
<HEAD>
<TITLE>Second Test of Section 9.8 of CSS2 Spec</TITLE>

<STYLE TYPE="text/css">
body {display: block; line-height: 200%;
      width: 400px; height: 400px }
p {display: block}
span {display: inline}
#outer {position: relative; top: -12px; color: red}
#inner {position: relative; top: 12px; color: blue}




</STYLE>
</HEAD>




<BODY>
<h1 >
Testing Second Testable Statement of Sec 9.8 of CSS2 Specification
</h1>


<ul>
<li  >
2. The final positions of boxes generated by the outer and inner elements
vary according to differences in normal flow, relative positioning, floats,
and absolute positioning.
</ul>




<h2 >
PASS CRITERIA:
</h2>
Here is some text
 <span id="outer"> start of outer contents
 <span id="inner"> inner contents</span>
 end of outer contents.</span>
<p>
If statement #2 is passed then
text flows normally up to the outer element.  The outer text is flowed into
its normal flow.  The inner contents are themselves offset relative to the
outer contents by 12px.
Inner contents should be blue, and outer contents red.
Rules are "body {display: block; line-height: 200%;
width: 400px; height: 400px}, p{display: block}", "span {display: inline}".
Also "#outer {position: relative; top: -12px; color: red}" and
"#inner {position: relative; top: 12px; color: blue}".
<p>
All other properties of this page should be UA-default.


</BODY>
</HTML>

